<template>
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="medium"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="查评事件" prop="eventTitle">
          <el-select
            ref="optionsRef"
            v-model="queryParams.eventTitle"
            class="full-width-input autoWidth"
            multiple
            filterable
            collapse-tags
          >
            <el-option
              v-for="option in reviewEventsOptionsList"
              :key="option.review_events_id"
              :label="option.review_events"
              :value="option.review_events_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="受评单位" prop="reviewUnit">
          <el-select
            multiple
            filterable
            collapse-tags
            v-model="queryParams.reviewUnit"
            class="full-width-input autoWidth"
          >
            <el-option-group
              v-for="group in unitOptions"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.data"
                :key="item.deptName"
                :label="item.deptName"
                :value="item.deptName"
              >
              </el-option>
            </el-option-group>
            <!-- <el-option
              v-for="option in deptOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="事件类型" prop="reviewClassify">
          <el-select
            v-model="queryParams.reviewClassify"
            class="full-width-input"
            clearable
          >
            <el-option
              v-for="(item, index) in type"
              :key="index"
              :label="item.dict_label"
              :value="item.dict_label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" prop="createBy">
          <el-input
            v-model="queryParams.createBy"
            placeholder="请输入创建人"
            clearable
            @keyup.enter.native="handleQuery"
            @input="changeMessage()"
          />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            ref="btn1"
            size="mini"
            type="warning"
            @click="handleAllChekTab"
            >全选</el-button
          >
        </el-form-item>
      </el-form>      
      <!-- @mouseenter="onStop"
        @mouseleave="onStart" -->
      <div
      @mouseenter="onStop"
        @mouseleave="onStart"
        style="position: relative"
        class="card-content"
        ref="box"
      >
        <span
          v-if="iconFlag"
          @click="leftTab"
          style="
            position: absolute;
            left: 0px;
            top: 45%;
            z-index: 1;
            width: 40px;
            height: 40px;
            background: #ccc;
            border-radius: 50%;
            line-height: 40px;
            text-align: center;
          "
          ><i class="el-icon-arrow-left"></i
        ></span>
        <span
          v-if="iconFlag"
          @click="rightTab"
          style="
            position: absolute;
            z-index: 1;
            right: 0px;
            top: 45%;
            width: 40px;
            height: 40px;
            background: #ccc;
            border-radius: 50%;
            line-height: 40px;
            text-align: center;
          "
          ><i class="el-icon-arrow-right"></i
        ></span>
        <el-row
          :gutter="20"
          v-loading="loading"
          style="
            width: 100%;
            height: 220px;
            display: flex;
            align-items: center;
            overflow: hidden;
          "
        >
          <el-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="5"
            :style="`will-change: transform; transform: translateX(${-left1}px); `"
            v-for="(item, key) in reviewEventsOptionSearch"
            :key="key"
            @click.native="handleAllChek(item)"
          >
            <el-card
            id="el-card-index"
              :class="
                item.reviewClassify === '消防能力评估标准'
                  ? 'update-log1'
                  : 'update-log2'
              "
              :style="
                item.status == true ? 'border:2px solid rgba(63,158,255,1)' : ''
              "
            >
              <span style="font-weight: bold; font-size: 18px; display: none">{{
                item.id
              }}</span>
              <div slot="header" class="clearfix" style="position: relative">
                <el-button
                  :class="
                    item.reviewClassify === '消防能力评估标准'
                      ? 'color1'
                      : 'color2'
                  "
                  type="success"
                  style="
                    float: left;
                    border-radius: 18px;
                    padding: 7px 10px;
                    font-size: 12px;
                    border: none;
                  "
                >
                  <img
                    style="
                      width: 15px;
                      height: 15px;
                      display: inline-block;
                      vertical-align: middle;
                    "
                    :src="
                      item.reviewClassify === '消防能力评估标准' ? url1 : url2
                    "
                    alt=""
                  />
                  {{
                    item.reviewClassify === "消防能力评估标准"
                      ? "消防事件"
                      : "应急事件"
                  }}</el-button
                >
                <el-checkbox
                  v-model="item.status"
                  @change="handleCheckedCitiesChange(item)"
                  style="float: right; margin-left: 10px"
                ></el-checkbox>
                <div style="float: right; width: 50%; font-size: 12px">
                  <span>任务进度</span>
                  <span
                    style="float: right"
                    :class="
                      item.reviewCount === item.Count
                        ? 'numColor1'
                        : item.num === 0
                        ? 'numColor3'
                        : 'numColor2'
                    "
                    >{{
                      item.reviewCount === item.Count
                        ? "已完成"
                        : item.num === 0
                        ? "未开始"
                        : item.reviewCount + "/" + item.Count
                    }}</span
                  >
                  <el-progress
                    style="margin-top: 5px"
                    :percentage="item.num"
                    text-inside
                    :color="getColor(item.num)"
                    :show-text="false"
                  ></el-progress>
                </div>
              </div>
              <div
                slot="header"
                class="clearfix"
                style="margin-top: 2.2%; height: 68px"
              >
                <span
                  style="
                    font-family: PingFangSC-Medium;
                    font-size: 16px;
                    color: #000000;
                    line-height: 34px;
                    font-weight: 500;
                  "
                  >{{ item.eventTitle }}</span
                >
              </div>
              <div
                class="body"
                style="
                  display: flex;
                  font-size: 10px;
                  height: 50px;
                  color: #5c6373;
                  line-height: 50px;
                  font-weight: 400;
                  white-space: nowrap;
                "
              >
                <div style="text-align: left; flex: 1">
                  <span
                    style="
                      text-align: left;
                      display: inline-block;
                      height: 30px;
                      line-height: 30px;
                    "
                    ><img
                      style="
                        width: 10.5px;
                        display: inline-block;
                        vertical-align: middle;
                      "
                      src="@/assets/images/time.png"
                      alt=""
                    />
                    创建时间：{{ item.CREATE_TIME }}</span
                  >
                </div>
                <div style="text-align: right">
                  <span
                    style="
                      text-align: right;
                      display: inline-block;
                      height: 30px;
                      line-height: 30px;
                    "
                    ><img
                      style="
                        width: 10.5px;
                        display: inline-block;
                        vertical-align: middle;
                      "
                      src="@/assets/images/personnel.png"
                      alt=""
                    />
                    创建人：{{ item.CREATE_BY }}</span
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-carousel
        indicator-position="outside"
        :autoplay="false"
        ref="carousel"
        @change="bidPlayChange"
      >
        <el-carousel-item>
          <div class="container">
            <div
              ref="chinaMapChart"
              id="chinaMapChart"
              style="width: 100%; height: 500px"
            ></div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="container_pie">
            <div
              ref="chinaMapChart_pie"
              id="chinaMapChart_pie"
              style="width: 100%; height: 500px"
            ></div>
          </div>
        </el-carousel-item>
      </el-carousel>
  
      <!-- <span v-if="tableFlag">受评单位：{{ evaluateObject }}</span> -->
      <el-table
        v-if="tableFlag"
        :data="problemList"
        :row-class-name="tableRowClassName"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'left' }"
        style="width: 100%"
        height="900"
        class="tableIndex"
      >
        <el-table-column label="序号" width="90">
          <div slot-scope="a">
            {{ a.$index + 1 }}
          </div>
        </el-table-column>
        <el-table-column
          prop="evaluationElements"
          sortable
          label="评估项目"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="problem" label="发现问题"> </el-table-column>
        <el-table-column prop="rectifySuggest" label="整改建议">
        </el-table-column>
        <el-table-column
          sortable
          prop="standardScore"
          label="应得分"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="score"
          label="实得分"
          sortable
          width="90"
        ></el-table-column>
        <el-table-column prop="deduct" label="扣分" sortable width="90">
        </el-table-column>
        <el-table-column prop="deductPursuant" label="扣分依据">
        </el-table-column>
        <el-table-column prop="isGreatProblem" label="重大问题（√）" width="120">
        </el-table-column>
      </el-table>
      <!-- <h2 style="margin: 160px auto; font-size: 50px; color: #407aed; font-weight: bold;">您好，欢迎使用消防应急能力评审系统！</h2> -->
      <!-- <div class="cotainer_box1">
        <div class="cotainer_VIP">
          <span>培训通知</span>
        </div>
        <el-table :data="tableData" style="width: 100%; height: calc(100% - 40px);">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
      <div class="cotainer_box2">
        <div style="float: left;font-size: 15px">个人收藏应用</div>
        <div style="float: right;font-size: 15px">更多+</div>
        <div class="cotainer_box2_box">
          <ul>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li> <li>
            <i class="el-icon-folder-opened"></i>
            <p>岗位人员</p>
          </li>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="cotainer_box1">
        <div class="cotainer_VIP">
          <span>培训通知</span>
        </div>
        <el-table :data="tableData" style="width: 100%; height: calc(100% - 40px);">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
      <div class="cotainer_box2">
        <i class="el-icon-date" style="color: #cbcccc">2023-6-5   星期一</i>
        <div class="cotainer_box2_box1"></div>
      </div> -->
    </div>
  </template>
  
  <script>
  import { listEventNew, statistics, queryDept } from "@/api/system/review/event";
  import { getReviewEvents, getDict } from "@/api/system/review/groping";
  import * as echarts from "echarts";
  import Vue from "vue";
  
  export default {
    name: "Analysis",
    data() {
      return {
        url1: require("@/assets/images/fire.png"),
        url2: require("@/assets/images/urgent.png"),
        notice: "",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 57,
          createBy: undefined,
          eventTitle: undefined,
          reviewClassify: undefined,
          dateRange: [],
          eventId: "",
          reviewUnit: undefined,
        },
        currentPage: null,
        dateRange: [],
        // 遮罩层
        loading: true,
        reviewEventsOptionSearch: [],
        reviewEventsOptionsList: [],
        optionsList: [],
        ids: null,
        dataStat: null,
        checkId: "",
        chekAllIds: "",
        reviewEventsListTotal: null,
        announcemenTimer: null,
        announcemenIndex: 0,
        type: [], //事件类型选项
  
        problemList: [],
        play: false,
        timer: 0,
        box: null,
        pageSize11: 5,
        left1: 0,
        fpsRaf: null, // fps回调标识
        moveRaf: null, // 一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义
        start: 0,
        end: 0,
        step: 1, // 默认移动参数（120fps: 0.5, 60fps: 1）
        amount: 4,
        iconFlag: false,
        checked1: false,
        deptOptions: [],
        unitOptions: [],
        evaluateObject: "",
        xIndex: "",
        idsa: "",
        tableFlag: false,
        isLock: false, // 控制按钮
      };
    },
    created() {
      this.fetchReviewEventsData();
      this.listEventNew();
      this.getDict();
      setTimeout(() => {
        this.getReviewEventsById();
      }, 1000);
      this.fpsRaf = requestAnimationFrame(this.getFPS);
      this.queryDept();
    },
    mounted() {
      // this.$refs.carousel.$el.addEventListener('current-change', this.handleCurrentChange())
      // console.log(this.$refs.carousel.$el)
      // this.initChartPie();
    },
    computed: {
      width() {
        // 滚动文字每条的固定宽度
        return Math.floor(168 * this.reviewEventsListTotal);
      },
    },
    methods: {
      getFPS(timestamp) {
        // 单位ms，用1000ms/两个时间的间隔≈刷新频率fps
        if (this.fpsRaf === 2) {
          this.start = timestamp;
        }
        if (this.fpsRaf === 3) {
          this.end = timestamp;
          // 计算屏幕刷新率
          const fps = Math.floor(1000 / (this.end - this.start));
          if (fps === 120) {
            this.step = 0.5;
          }
        }
        this.fpsRaf = requestAnimationFrame(this.getFPS);
        if (this.fpsRaf > 3) {
          cancelAnimationFrame(this.fpsRaf);
          this.onStart();
        }
      },
      onClick(title) {
        // 通知父组件点击的标题
        this.$emit("click", title);
      },
      onStop() {
        // 暂停动画
        cancelAnimationFrame(this.moveRaf);
        this.iconFlag = true;
      },
      onStart() {
        // 开始动画
        this.iconFlag = false;
        let rewLength = JSON.parse(
          sessionStorage.getItem("reviewEventsOptionSearch")
        );
        if (rewLength.length > this.amount) {
          // 超过amount条开始滚动
          this.moveRaf = requestAnimationFrame(this.moveLeft);
        }
      },
      moveLeft() {
        let rewLength = JSON.parse(
          sessionStorage.getItem("reviewEventsOptionSearch")
        );
        if (this.left1 >= this.width) {
          rewLength.push(rewLength.shift()); // 将第一条数据放到最后
          this.left1 = 0;
        } else {
          this.left1 += this.step; // 每次移动step（px）
        }
        this.moveRaf = requestAnimationFrame(this.moveLeft);
      },
      leftTab() {
        if (this.left1 < 0) {
          return;
        } else {
          this.left1 -= 100;
        }
      },
      rightTab() {
        this.left1 += 100;
      },
      // 受评单位
      queryDept() {
        let name = this.$store.state.user.name;
        queryDept(name).then((row) => {
          let a = row.其他;
          let b = row.新能源;
          let c = row.水电;
          let d = row.火电;
          let arr = {
            label: "其他",
            data: a,
          };
          let arr2 = {
            label: "新能源",
            data: b,
          };
          let arr3 = {
            label: "水电",
            data: c,
          };
          let arr4 = {
            label: "火电",
            data: d,
          };
          this.unitOptions.push(arr, arr2, arr3, arr4);
  
          // this.deptOptions = [];
          // this.unitOptions = row
          // row.forEach((item) => {
          //   this.deptOptions.push({
          //     label: item.deptName,
          //     value: item.deptName,
          //   });
          // });
        });
      },
      // 表单重置
      // reset() {
      //   this.form = {
      //     createBy: undefined,
      //     eventTitle: undefined,
      //     reviewClassify: undefined,
      //     dateRange: [],
      //     eventId:'',
      //   };
      //   this.resetForm("form");
      // },
      initChart(data) {
        var myChart = echarts.init(this.$refs.chinaMapChart);
        // this.$refs.chinaMapChart.css( 'width', this.$refs.chinaMapChart.width());
        var option;
        option = {
          legend: {},
          tooltip: {},
          dataset: {
            dimensions: data.dimensions,
            source: data.source,
          },
          xAxis: {
            type: "category",
            axisLabel: {
              interval: 0,
              rotate: 10,
              // formatter:function(value){
              //   return "<span>value</span>"
              // }
            },
          },
          yAxis: {},
          color: ["#fac858", "#ee6666", "#5B8FF9", "#5AD8A6"],
          series: [
            {
              type: "bar",
              barWidth: "5%",
              itemStyle: {
                color: "rgba(91,143,249,0.85)",
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //顶部显示
                    formatter: function (params) {
                      return params.seriesName + ":" + params.value.发现问题;
                    },
                    textStyle: {
                      //数值样式
                      color: "black",
                      fontSize: this.fontSizehandle(3),
                    },
                  },
                },
              },
            },
            {
              type: "bar",
              barWidth: "5%",
              itemStyle: {
                color: "rgba(90,216,166,0.85)",
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //顶部显示
                    formatter: function (params) {
                      return params.seriesName + ":" + params.value.重大问题;
                    },
                    textStyle: {
                      //数值样式
                      color: "black",
                      fontSize: this.fontSizehandle(3),
                    },
                  },
                },
              },
            },
            {
              type: "bar",
              barWidth: "5%",
              itemStyle: {
                color: "rgba(93,112,146,0.85)",
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //顶部显示
                    formatter: function (params) {
                      return params.seriesName + ":" + params.value.总条数;
                    },
                    textStyle: {
                      //数值样式
                      color: "black",
                      fontSize: this.fontSizehandle(3),
                    },
                  },
                },
              },
            },
            {
              type: "bar",
              barWidth: "5%",
              itemStyle: {
                color: "rgba(93,112,146,0.85)",
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //顶部显示
                    formatter: function (params) {
                      return params.seriesName + ":" + params.value.标准分;
                    },
                    textStyle: {
                      //数值样式
                      color: "black",
                      fontSize: this.fontSizehandle(3),
                    },
                  },
                },
              },
            },
            {
              type: "bar",
              barWidth: "5%",
              itemStyle: {
                color: "rgba(93,112,146,0.85)",
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //顶部显示
                    formatter: function (params) {
                      return params.seriesName + ":" + params.value.应得分;
                    },
                    textStyle: {
                      //数值样式
                      color: "black",
                      fontSize: this.fontSizehandle(3),
                    },
                  },
                },
              },
            },
            {
              type: "bar",
              barWidth: "5%",
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //顶部显示
                    formatter: function (params) {
                      return params.seriesName + ":" + params.value.实得分;
                    },
                    textStyle: {
                      //数值样式
                      color: "black",
                      fontSize: this.fontSizehandle(3),
                    },
                  },
                },
              },
            },
            {
              type: "bar",
              barWidth: "5%",
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //顶部显示
                    formatter: function (params) {
                      return params.seriesName + ":" + params.value.扣分;
                    },
                    textStyle: {
                      //数值样式
                      color: "black",
                      fontSize: this.fontSizehandle(3),
                    },
                  },
                },
              },
            },
            {
              type: "bar",
              barWidth: "5%",
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //顶部显示
                    formatter: function (params) {
                      return params.seriesName + ":" + params.value.得分率;
                    },
                    textStyle: {
                      //数值样式
                      color: "black",
                      fontSize: this.fontSizehandle(3),
                    },
                  },
                },
              },
            },
          ],
        };
        myChart.clear();
        option && myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
        myChart.off("click");
        myChart.getZr().off("click");
        this.idsa = this.dataStat.ids.split(",");
        myChart.getZr().on("click", (params) => {
          if (this.isLock == false) {
            let pointInPixel = [params.offsetX, params.offsetY];
            if (myChart.containPixel("grid", pointInPixel)) {
              this.xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
                params.offsetX,
                params.offsetY,
              ])[0];
              this.getReviewEventsById1(this.idsa[this.xIndex]);
              this.tableFlag = true;
              this.isLock = true;
              setTimeout(() => {
                this.isLock = false;
              }, 2000);
            }
          }
        });
      },
      initChartPie() {
        var myChart = echarts.init(this.$refs.chinaMapChart_pie);
        var option;
  
        option = {
          title: {
            text: "Referer of a Website",
            subtext: "Fake Data",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              data: [
                { value: 1048, name: "Search Engine" },
                { value: 735, name: "Direct" },
                { value: 580, name: "Email" },
                { value: 484, name: "Union Ads" },
                { value: 300, name: "Video Ads" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
  
        option && myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
      bidPlayChange(index) {
        this.currentPage = index;
        // this.dataStat.ids = ''
        this.listEventNew()
        this.getReviewEventsById()
        console.log(index, this.dataStat);
      },
      // onStopViews() {
      //   this.chart = true;
      // },
      // onStartViews() {
      //   // 开始动画
      //   this.chart = false;
      // },
      // rightNext() {
      //   // debugger
      //   this.$$nextTick(()=>{
      //     this.chartsView = false;
      //   this.chartsView1 = true;
      //   })
  
      //   // this.initChartPie();
      // },
      // leftPrev() {},
      fontSizehandle(res) {
        let idslen = this.dataStat.ids.split(",");
        if (idslen.length > 1) {
          idslen.pop();
        }
        console.log(res, idslen);
        if (idslen.length > 2) {
          let fontSize = 6 / idslen.length;
          return res * fontSize + 3;
        }
      },
  
      changeMessage() {
        this.$forceUpdate();
      },
      handleQuery() {
        if (this.queryParams.eventTitle != undefined) {
          this.queryParams.eventTitle = "";
          this.queryParams.eventId = "";
          for (let i = 0; i < this.$refs.optionsRef.selected.length; i++) {
            this.queryParams.eventTitle +=
              this.$refs.optionsRef.selected[i].currentLabel + ",";
  
            this.queryParams.eventId +=
              this.$refs.optionsRef.selected[i].value + ",";
          }
          this.queryParams.eventTitle = this.queryParams.eventTitle.toString();
        }
        if (this.queryParams.reviewUnit != undefined) {
          // this.queryParams.reviewUnit = "";
          this.queryParams.reviewUnit = this.queryParams.reviewUnit.toString();
        }
  
        this.listEventNew();
  
        if (
          this.queryParams.eventTitle != "" &&
          this.queryParams.eventTitle != undefined
        ) {
          let eventTitleOne = this.queryParams.eventTitle.split(",");
          console.log("eventTitleOne.pop()", eventTitleOne.pop(), eventTitleOne);
          this.queryParams.eventTitle = eventTitleOne;
        }
        if (
          this.queryParams.reviewUnit != "" &&
          this.queryParams.reviewUnit != undefined
        ) {
          let reviewUnitOne = this.queryParams.reviewUnit.split(",");
          this.queryParams.reviewUnit = reviewUnitOne;
        }
  
        cancelAnimationFrame(this.moveRaf);
        this.left1 = 0;
      },
      /** 重置按钮操作 */
      resetQuery() {
        if (this.$refs.btn1.$el.innerText == "取消") {
          this.$refs.btn1.$el.innerText = "全选";
        }
        this.dateRange = [];
        this.queryParams = this.$options.data().queryParams;
        this.listEventNew();
        this.checkId = "";
        this.dataStat = {
          ids: "1721333326080851970",
        };
        this.tableFlag = false;
        this.getReviewEventsById();
      },
      // 卡片数据
      listEventNew() {
        listEventNew(this.addDateRange(this.queryParams, this.dateRange))
          .then((response) => {
            response.data.forEach(function (item, index, array) {
              Vue.set(item, "num", (item.reviewCount / item.Count) * 100);
              Vue.set(item, "status", false);
            });
            sessionStorage.setItem(
              "reviewEventsOptionSearch",
              JSON.stringify(response.data)
            );
            this.reviewEventsOptionSearch = response.data;
            this.reviewEventsListTotal = response.dataCount;
            this.loading = false;
          })
          .finally(() => {});
      },
      // 图表
      getReviewEventsById(idChe) {
        this.loading = true;
        if (idChe) {
          this.dataStat = {
            ids: idChe,
          };
        } else {
          this.dataStat = {
            ids: "1721333326080851970",
            // idn:'1'
          };
        }
  
        statistics(this.dataStat)
          .then((response) => {
            this.optionsList = response;
            this.loading = false;
            this.initChart(response);
            this.initChartPie();
          })
          .finally(() => {});
      },
      // 表格
      getReviewEventsById1(idChe) {
        this.loading = true;
        this.dataStat = {
          ids: idChe,
          idn: "1",
        };
        statistics(this.dataStat)
          .then((response) => {
            this.problemList = response.problemList;
            response.problemList.forEach((item, i) => {
              let score = item.standardScore - item.deduct;
              this.$set(item, "score", score);
            });
            this.loading = false;
          })
          .finally(() => {});
      },
      // 请求后台接口获取查评事件数据
      fetchReviewEventsData() {
        getReviewEvents(this.addDateRange(this.queryParams))
          .then((response) => {
            this.reviewEventsOptionsList = response.data;
            sessionStorage.setItem("pageSizeCount", response.data.length);
          })
          .finally(() => {});
      },
      // 事件类型
      getDict() {
        getDict()
          .then((response) => {
            this.type = response.data;
          })
          .finally(() => {});
      },
      handleAllChekTab() {
        for (let i = 0; i < this.reviewEventsOptionSearch.length; i++) {
          if (this.reviewEventsOptionSearch[i].status == false) {
            this.reviewEventsOptionSearch[i].status = true;
            this.$refs.btn1.$el.innerText = "取消";
            this.chekAllIds += this.reviewEventsOptionSearch[i].id + ",";
            this.getReviewEventsById(this.chekAllIds);
          } else {
            this.reviewEventsOptionSearch[i].status = false;
            this.$refs.btn1.$el.innerText = "全选";
            this.dataStat = {
              ids: "1721333326080851970",
            };
            this.getReviewEventsById(this.dataStat.ids);
          }
        }
      },
      // handleCheckedCitiesChange(item) {
      //   if (item.status == false) {
      //     Vue.set(item, "status", true);
      //     this.checkId += item.id + ",";
      //     this.getReviewEventsById(this.checkId);
      //   } else {
      //     Vue.set(item, "status", false);
      //     let checkIdNew = this.checkId.split(",");
      //     for (let i = 0; i < checkIdNew.length; i++) {
      //       if (checkIdNew[i] == item.id) {
      //         checkIdNew.splice(i, 1);
      //         this.checkId = checkIdNew.toString();
      //         this.getReviewEventsById(checkIdNew.toString());
      //       }
      //     }
      //   }
      // },
      // chek点击卡片
      handleAllChek(item) {
        if (this.currentPage == 1) {
          this.checkId += item.id + ",";
          let status = item.status;
          // this.$set(item, "status", (status = !status));
          let checkedLen = this.checkId.split(",");
  
          const eventList = _.filter(
            this.reviewEventsOptionSearch,
            (data) => data.id != item.id
          );
          for (let i = 0; i < this.reviewEventsOptionSearch.length; i++) {
            if (this.reviewEventsOptionSearch[i].id==item.id ) {
              // console.log('eventList[i]ii,',item,this.reviewEventsOptionSearch[i])
              status=!status
              this.$set(this.reviewEventsOptionSearch[i], "status", this.reviewEventsOptionSearch[i].status = !this.reviewEventsOptionSearch[i].status);
              break;
            } else {
              // console.log('elseeeeeeeeee')
              for (let i = 0; i < eventList.length; i++) {
                this.$set(eventList[i], "status", (status = false));
                
              }
            }
          }
        } else {
          let status = item.status;
          this.$set(item, "status", (status = !status));
          if (item.status == true) {
            this.checkId += item.id + ",";
            this.getReviewEventsById(this.checkId);
          } else {
            let checkIdNew = this.checkId.split(",");
            for (let i = 0; i < checkIdNew.length; i++) {
              if (checkIdNew[i] == item.id) {
                checkIdNew.splice(i, 1);
                this.checkId = checkIdNew.toString();
                this.getReviewEventsById(checkIdNew.toString());
              }
            }
          }
        }
      },
      // 修改进度条颜色
      getColor(val) {
        if (val < 100) {
          return "#FF8000";
        }
      },
      tableRowClassName({ row, rowIndex }) {
        if (row.isGreatProblem === "√") {
          return "warning-row";
        }
        return "";
      },
    },
  };
  </script>
  <stytle scoped lang="scss">
  </stytle>
  <style>
  .color1 {
    background-color: #e3f5e5 !important;
    color: #248f32;
  }
  .color2 {
    background-color: #fff2e5 !important;
    color: #ff8000;
  }
  .card-content .update-log1 {
    background-image: linear-gradient(66deg, #f1faf2 0%, #ffffff 52%);
    box-shadow: 0px 2px 20px 0px rgba(228, 232, 241, 1);
    border-radius: 12px;
  }
  .card-content .update-log2 {
    background-image: linear-gradient(65deg, #fff5eb 0%, #ffffff 52%);
    box-shadow: 0px 2px 20px 0px rgba(228, 232, 241, 1);
    border-radius: 12px;
  }
  ::v-deep.el-progress-bar__innerText {
    display: none;
  }
  .card-content .leftBtn {
    width: 37px;
    height: 100%;
    padding: 5% 10px;
    float: left;
    background-image: linear-gradient(13deg, #ffffff 0%, #ffffff 52%);
    box-shadow: 0px 2px 15px 0px rgba(228, 232, 241, 1);
    border-radius: 9.23px;
    margin: 19px 0 0 10px;
  }
  .card-content .rightBtn {
    width: 37px;
    height: 100%;
    padding: 5% 10px;
    float: left;
    background-image: linear-gradient(13deg, #ffffff 0%, #ffffff 52%);
    box-shadow: 0px 2px 15px 0px rgba(228, 232, 241, 1);
    border-radius: 9.23px;
    margin: 19px 10px 0 0px;
  }
  .el-card__header {
    border-bottom: none !important;
    padding: 14px 15px 0px;
  }
  .card-content .el-card__body {
    padding: 0px 18px 0px 15px;
  }
  /*.el-checkbox__inner {*/
  /* border-radius: 50%;*/
  /*}*/
  
  .el-carousel__item h3 {
    font-size: 18px;
    opacity: 0.75;
    line-height: 500px;
    margin: 0;
  }
  .el-carousel__container {
    height: 500px !important;
  }
  /* .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  } */
  
  #el-card-index {
    transition: transform 0.3s ease;
  }
  
  .card-content #el-card-index:hover {
    transform: scale(1.1);
  }
  .el-carousel__indicators--horizontal {
    display: none;
  }
  .toUp {
    transform: all 1s;
  }
  .autoWidth .el-select__tags > span .el-tag:first-child {
    width: 60%;
  }
  .tableIndex .el-table__row td:nth-child(1) {
    text-align: center !important;
  }
  .tableIndex .el-table__row td:nth-child(2) {
    text-align: center !important;
  }
  .tableIndex .el-table__row td:nth-child(5) {
    text-align: center !important;
  }
  .tableIndex .el-table__row td:nth-child(6) {
    text-align: center !important;
  }
  .tableIndex .el-table__row td:nth-child(7) {
    text-align: center !important;
  }
  .tableIndex .el-table__row td:nth-child(9) {
    text-align: center !important;
  }
  .tableIndex .el-table__row td:nth-child(3) {
    text-indent: 1em;
  }
  .tableIndex .el-table__row td:nth-child(4) {
    text-indent: 1em;
  }
  .tableIndex .el-table__row td:nth-child(8) {
    text-indent: 1em;
  }
  .tableIndex .has-gutter th:nth-child(3) {
    text-align: left !important;
  }
  .tableIndex .has-gutter th:nth-child(4) {
    text-align: left !important;
  }
  .tableIndex .has-gutter th:nth-child(8) {
    text-align: left !important;
  }
  .tableIndex .warning-row {
    background: #fde6e6 !important;
  }
  .tableIndex .el-table__row td {
    background: transparent !important;
  }
  /* .el-select__tags-text{
    width: 80px;
  }  */
  /*//.el-table__cell{*/
  /*//border: 1px solid #e6e2e2;*/
  /*//padding: 15px 0;*/
  /*//}*/
  /*//.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell{*/
  /*//  border-bottom: 1px solid #ffffff;*/
  /*//}*/
  
  /* .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
  
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    } */
  </style>
  <!--
  <style scoped lang="scss">
  .app-containers {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100%;
    padding: 10px;
  }
  
  .cotainer_box1 {
    overflow: hidden;
    width: 69%;
    background-color: #ffffff;
    height: 450px;
    margin-top: 10px;
  
    .cotainer_VIP {
      width: 95px;
      height: 30px;
      border: 2px solid #2259f0;
      border-radius: 7px;
      padding: 3px;
  
      span {
        color: #ffffff;
        background: #2459f3;
        display: block;
        border-radius: 7px;
        width: 85px;
        font-size: 14px;
        text-align: center;
      }
    }
  }
  
  .cotainer_box2 {
    width: 29%;
    //padding-top: 20%;
    background-color: #ffffff;
    margin-top: 10px;
    padding: 10px;
    height: 450px;
    .cotainer_box2_box1 {
      width: 100%;
      height: 400px;
      background: #f4f7ff;
      margin-top: 10px;
      border-radius: 15px;
    }
    .cotainer_box2_box {
      width: 100%;
      height: 400px;
      background: #f4f7ff;
      margin-top: 30px;
      border-radius: 15px;
      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        list-style: none;
        padding: 5px;
        li {
          width: 32%;
          height: 120px;
          background: #e0e8fb;
          margin-top: 7px;
          border-radius: 15px;
          text-align: center;
          i {
            height: 40px;
            margin-top: 20px;
            color: #4372ef;
            font-size: 45px;
          }
        }
      }
    }
  }
  
  .el-table {
    height: 100%;
  }
  
  </style> -->
  